<template>
  <div class="baseInfoForm" v-dragable>
    <div class="header">
      <h3 class="title">基础信息</h3>
      <ElIcon :size="20" color="rgba(164, 164, 193, 1)" @click="props.onClose">
        <ArrowRight />
      </ElIcon>
    </div>
    <el-form :model="ruleForm" :inline="true" ref="formRef" label-width="120px">
      <el-form-item
        label="作战场景"
        prop="operatingScen"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }"
      >
        <el-select
          v-model="ruleForm.operatingScen"
          clearable
          placeholder="请选择"
          :disabled="true"
        >
          <el-option label="对地" value="对地" />
          <el-option label="对海" value="对海" />
          <el-option label="对空" value="对空" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="导引头体制"
        prop="dytStyle"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }"
      >
        <el-select v-model="ruleForm.dytStyle" clearable placeholder="请选择" :disabled="true">
          <el-option label="雷达(主动)" value="雷达(主动)" />
          <el-option label="雷达(被动)" value="雷达(被动)" />
          <el-option label="红外" value="红外" />
          <el-option label="雷达-红外符合制导" value="雷达-红外符合制导" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="干扰场景类型"
        prop="interScenType"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }"
      >
        <el-select
          v-model="ruleForm.interScenType"
          clearable
          placeholder="请选择"
          :disabled="true"
        >
          <el-option label="单一干扰" value="单一干扰" />
          <el-option label="组合干扰" value="组合干扰" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="干扰类型"
        prop="interType"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }"
      >
        <el-select
          v-model="ruleForm.interType"
          clearable
          placeholder="请选择"
          @change="onHandleInterferType"
          :disabled="true"
        >
          <el-option label="舰载有源干扰-雷达" value="舰载有源干扰-雷达" />
          <el-option label="舷外有源干扰-雷达" value="舷外有源干扰-雷达" />
          <el-option label="箔条干扰-雷达" value="箔条干扰-雷达" />
          <el-option label="角反干扰-雷达" value="角反干扰-雷达" />
          <el-option label="红外有源干扰" value="红外有源干扰" />
          <el-option label="红外无源干扰" value="红外无源干扰" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="外军电子战备类型"
        prop="foreignElectEquip"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }"
      >
        <el-select
          v-model="ruleForm.foreignElectEquip"
          clearable
          placeholder="请选择"
          :disabled="true"
        >
          <el-option label="舰载有源干扰" value="舰载有源干扰" />
          <el-option label="舷外有源干扰" value="舷外有源干扰" />
          <el-option label="角反干扰" value="角反干扰" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import type { FormInstance } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue';
import vDragable from '@/directive/dragable/index';
let $router = useRouter();
const route = useRoute();
const isLook = route.query.layerType === 'look' ? true : false;
const disabled = ref<boolean>(isLook);

const props = defineProps({
  onClose: {
    type: Function,
    default: () => {},
  },
  sampleBaseInfoVO: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const emit = defineEmits(['onInterferTypeValue']);
const ruleForm = ref<any>({
  operatingScen: '',
  dytStyle: '',
  interScenType: '',
  interType: '',
  foreignElectEquip: '',
});
// 表单实例对象
const formRef = ref<FormInstance>();
// 拖拽指令实例
const dragableFather = ref<string>('body');

onMounted(() => {
  ruleForm.value  = props.sampleBaseInfoVO;
})

watch(
  () => props.sampleBaseInfoVO,
  (newValue, oldValue) => {
    ruleForm.value = newValue;
  }
);

// 保存
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      $router.push({ path: 'testDataDeal/layer', query: { id: '123' } });
    } else {
      console.log('error submit!', fields);
    }
  });
};

// 干扰类型选中事件
const onHandleInterferType = (value: string) => {
  emit('onInterferTypeValue', value);
};

// 通过defineExpose暴漏事件和属性
// defineExpose({ interferType })
</script>

<style lang="scss" scoped>
@import '@/assets/style/buttons';
.baseInfoForm {
  width: 360px;
  position: absolute;
  right: 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 12px 2px rgba(26, 45, 122, 0.3);
  //   z-index: 9999;
  :deep() {
    .el-input--small .el-input__wrapper {
      width: 200px;
    }
  }
  .header {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(221, 221, 221, 1);
    margin-bottom: 10px;
    .title {
      font-size: 16px;
      color: rgba(1, 18, 90, 1);
    }
    .el-icon {
      cursor: pointer;
    }
  }
}
</style>
